<template>
	<view class="container">
		<view class="box-bg">
			<uni-nav-bar shadow left-icon="left"  title="标题" rightText="设置" :border="false"
				:shadow="false" />
		</view>
		<view class="listSearch">
			<!-- 顶部导航栏 -->
			<view class="nav-bar">
				<view @click="titleBtn2" class="nav-item" :class="{active: currentTab === 'hotel'}">酒店</view>
				<view @click="titleBtn1" class="nav-item" :class="{active1: currentTab === 'longTermRent'}">月租房</view>
				<view @click="titleBtn3" class="nav-item" :class="{active2: currentTab === 'homestay'}">民宿</view>
			</view>
			<!-- 搜索条件区域 -->
			<view class="search-conditions">
				<view class="condition-item">
					<view class="label">城市</view>
					<view class="value">
						<picker @change="handleCityChange" :value="cityIndex" :range="cities">
							<view>{{cities[cityIndex]}}</view>
						</picker>
					</view>
				</view>
				<view class="condition-item">
					<view class="label">位置</view>
					<view class="value">
						<input type="text" placeholder="CBD历史文化公园" v-model="location">
					</view>
				</view>
				<view class="condition-item date-item">
					<view class="label">今天入住</view>
					<view class="value">
						<date-picker v-model="checkInDate" type="date"></date-picker>
					</view>
				</view>
				<view class="condition-item date-item">
					<view class="label">明天离店</view>
					<view class="value">
						<date-picker v-model="checkOutDate" type="date"></date-picker>
					</view>
				</view>
				<view class="condition-item">
					<view class="label"></view>
					<view class="value">
						<text>试试搜：酒店/地名</text>
					</view>
				</view>
			</view>
			<!-- 搜索按钮区域 -->
			<view class="search-button">
				<button @click="searchHotels">查找酒店</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
// right-icon="wallet"

	const currentTab = ref('hotel') // 当前选中的标签
	const cities = ref(['北京']) // 城市列表
	const cityIndex = ref(0) // 当前选中的城市索引
	const location = ref('CBD历史文化公园') // 位置
	const checkInDate = ref('2023-11-25') // 入住日期
	const checkOutDate = ref('2023-11-26') // 离店日期

	function titleBtn1(){
		currentTab.value='longTermRent'
	}
	function titleBtn2(){
		currentTab.value='hotel'
	}
	function titleBtn3(){
		currentTab.value='homestay'
	}
	function handleCityChange(e) {
		console.log(e,111)
		cityIndex = e.target.value;
	}

	function searchHotels() {
		// 这里可以添加实际的搜索逻辑，比如调用API获取酒店数据
		console.log('搜索条件：', {
			city: cities[cityIndex],
			location: location,
			checkInDate: checkInDate,
			checkOutDate: checkOutDate
		});
	}
</script>

<style scoped>
	.container {
		/* padding: 20px; */
	}

	.listSearch {
		background-color: white;
		margin: 0 30rpx;
		border-radius: 20rpx;
		margin-top: 40rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.nav-bar {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20px;
		background-color: #DDEFFE;
	}

	.nav-item {
		padding: 10px 0;
		width: 33.2%;
		text-align: center;
		background-color: #DDEFFE;
		border-bottom: 2px solid transparent;
		cursor: pointer;
	}

	.nav-item.active {
		background-color: #fff;
		color: #007AFF;
		border-radius:0 60rpx 0 0;
		font-weight: bold;
	}
	.nav-item.active1 {
		background-color: #fff;
		color: #007AFF;
		border-radius:40rpx 40rpx 0 0;
		font-weight: bold;
	}
	.nav-item.active2 {
		background-color: #fff;
		color: #007AFF;
		border-radius:60rpx 0 0 0;
		font-weight: bold;
	}
	.search-conditions {
		margin-bottom: 20px;
	}

	.condition-item {
		margin-bottom: 10px;
	}

	.label {
		display: inline-block;
		width: 80px;
	}

	.value {
		display: inline-block;
	}

	.date-item {
		display: flex;
		justify-content: space-between;
	}

	.search-button {
		text-align: center;
	}

	button {
		width: 100%;
		padding: 15px;
		background-color: #007AFF;
		color: white;
		border-radius: 5px;
		border: none;
	}
</style>